// Methods to tag photos with lzlumen.
//
// Copyright (C) 2009  Brandon Beresini
// 
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// 
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
// 
// You should have received a copy of the GNU General Public License
// along with this program.  If not, see <http://www.gnu.org/licenses/>.

var lumenURL = ""

var maxWidth = 600; // the maximum pixel width of document.lzLumenPicture
var maxHeight = 600; // the maximum pixel height of document.lzLumenPicture

var tagFrameBorderWidth = 5; // the width of the border around div id="tagFrame"

// limits absolute to document.lzLumenPicture that offset where div id="tagFrame"
// can be drawn to adjust for how browsers handle tagFrame's border
var imageLeft;
var imageRight;
var imageTop;
var imageBottom;

var imageOffsetXExternal; // left offset of document.lzLumenPicture from page
var imageOffsetYExternal; // top offset of document.lzLumenPicture from page

var eventSelect = 0; // control for which tagFrame event to call

// holders for tagFrame initial conditions
var initialLeft;
var initialTop;
var frameWidth;
var frameHeight;

var mousePosition; // holds the browser resolved page position of the mouse
var initialX; // holds initial x position for mouse events
var initialY; // holds initial y position for mouse events
var mousePositionX; // holds current x position absolute to lzLumenPicture
var mousePositionY; // holds current y position absolute to lzLumenPicture

var tagArray = [];
var tagToEdit = 0; // control for which element of tagArray is to be edited

// tag frame elements
var tagFrame;
var cornerDragger;

registerEventListener(window, "load", initializePage, false);
//window.onload = initializePage;
/* initializePage registers the initial event listeners and calls pictureLoaded.
/* It is used to prepare the tagging functionality. */
function initializePage () {
	
	pictureLoaded();
	
	registerEventListener(document.lzLumenPicture, "load", pictureLoaded, false);
	registerEventListener(document.getElementById("pictureSelection"), "click", loadPicture, false);
	
	registerEventListener(document.getElementById("submitTag"), "click", addTag, false);
	registerEventListener(document.getElementById("tagFormDisplay"), "reset", cancelEdit, false);
	
	registerEventListener(document.getElementById("generateCode"), "click", generateEmbedCode, false);
	
	registerEventListener(document.getElementById("pictureTagScreen"), "mousedown", tagFrameDrawerStarter, false);
	registerEventListener(document.getElementById("tagFrame"), "mousedown", tagFrameMoverStarter, false);
	registerEventListener(document.getElementById("cornerDragger"), "mousedown", tagFrameResizerStarter, false);
	
	registerEventListener(document.getElementById("testTag"), "mouseover", testTagMouseOver, false);
	registerEventListener(document.getElementById("tagsTable"), "mouseout", testTagMouseOut, false);
	registerEventListener(document.getElementById("tagsTroughTableHolder"), "mouseout", delayForMouseOver, false);
	
}

/* pictureLoaded resizes the lzLumenPicture to fit the constraints maxWidth and
/* maxHeight. It then calls spotlightTaggerInitializer. */
function pictureLoaded () {
	if (document.lzLumenPicture.width > document.lzLumenPicture.height) {
    if (document.lzLumenPicture.width > maxWidth) {
      document.lzLumenPicture.width = maxWidth;
    } 
  } else if (document.lzLumenPicture.height > maxHeight) {
    document.lzLumenPicture.height = maxHeight;
  }

  spotlightTaggerInitializer();
  document.getElementById('pictureLoadingIndicator').style.visibility = 'hidden';

}

/* spotlightTaggerInitializer sets the page to use document.lzLumenPicture. It
/* handles positioning of the masks and the tagFrame and clears the tags and
/* generated code. */
function spotlightTaggerInitializer () {
	
	tagFrame = document.getElementById("tagFrame");
	cornerDragger = document.getElementById("cornerDragger");
	var picture = document.getElementById("picture"); // div that holds image
	var pictureTagScreen = document.getElementById("pictureTagScreen"); // cover of lzLumenPicture to provide a surface for tagging nad tagging events
	var imageOffset = getOffset(document.lzLumenPicture); // the page offset
	imageOffsetXExternal= imageOffset[0];
	imageOffsetYExternal = imageOffset[1];
	
	// offset within containing div
  imageOffsetX = document.lzLumenPicture.offsetLeft;
  imageOffsetY = document.lzLumenPicture.offsetTop;
  
	imageWidth = document.lzLumenPicture.offsetWidth;
  imageHeight = document.lzLumenPicture.offsetHeight;

  picture.style.height = imageHeight + "px";

	// places pictureTagScreen ove lzLumenPicture
	pictureTagScreen.style.left = imageOffsetX + "px";
	pictureTagScreen.style.top = imageOffsetY + "px";
	pictureTagScreen.style.width = imageWidth + "px";
  pictureTagScreen.style.height = imageHeight + "px";

	// adjusts the tagFrameBorder and cornerDragger to specified size
	//tagFrame.style.border = tagFrameBorderWidth + "px solid #aaa";
	cornerDragger.style.width = 2 * tagFrameBorderWidth + "px";
	cornerDragger.style.height = 2 * tagFrameBorderWidth + "px";
	
	// gets adjusted absolute lzLumenPicture bounds
  imageLeft = imageOffsetX - tagFrameBorderWidth;
  imageRight = imageOffsetX + imageWidth - tagFrameBorderWidth;
  imageTop = imageOffsetY - tagFrameBorderWidth;
  imageBottom = imageOffsetY + imageHeight - tagFrameBorderWidth;
	document.lzLumenPicture.style.left = imageOffsetX + "px";
	document.lzLumenPicture.style.top = imageOffsetY + "px";

	// positions and sizes tagger elements
	document.getElementById("leftMask").style.left = imageOffsetX + "px";
	document.getElementById("leftMask").style.width = 0 + "px";
	document.getElementById("leftMask").style.top = imageOffsetY + "px";
	document.getElementById("leftMask").style.height = imageHeight + "px";
	document.getElementById("rightMask").style.left = imageOffsetX + imageWidth + "px";
	document.getElementById("rightMask").style.width = 0 + "px";
	document.getElementById("rightMask").style.top = imageOffsetY + "px";
	document.getElementById("rightMask").style.height = imageHeight + "px";
	document.getElementById("topMask").style.left = imageOffsetX + "px";
	document.getElementById("topMask").style.width = imageWidth + "px";
	document.getElementById("topMask").style.top = imageOffsetY + "px";
	document.getElementById("topMask").style.height = 0 + "px";
	document.getElementById("bottomMask").style.left = imageOffsetX + "px";
	document.getElementById("bottomMask").style.width = imageWidth + "px";
	document.getElementById("bottomMask").style.top = imageOffsetY + imageHeight + "px";
	document.getElementById("bottomMask").style.height = 0 + "px";
	document.getElementById("tagsTable").style.left = imageOffsetX + "px";
	document.getElementById("tagsTable").style.top = imageOffsetY + imageHeight + 10 + "px";
	document.getElementById("tagFormDisplay").style.top = imageOffsetY + imageHeight + 50 + "px";
	document.getElementById("formulatedCode").style.left = imageOffsetX + "px";
	document.getElementById("formulatedCode").style.top = imageOffsetY + imageHeight + 100 + "px";
	
	// sets proper visibility of tagFrame elements
	tagFrame.style.visibility = "hidden";
	cornerDragger.style.visibility = "hidden";
	
	// hides tag tester since no tags exist
	document.getElementById("tagsTable").style.visibility = "hidden";
	
	// clears tags and generated code for use with picture
	document.tagForm.tag.value = "";
	tagArray = [];
	tagToEdit = tagArray.length;
	clearCode();
	drawTagTroughTable();
}

/* tagMover handles dragging the tagFrame.
?* startX: x position of mouse at time of call
?* startY: y position of mouse at time of call */
function tagMover (startX, startY) {
	initialX = startX;
	initialY = startY;
	
	// stores the initial position information of tagFrame
	initialLeft = parseInt(tagFrame.style.left);
	initialTop = parseInt(tagFrame.style.top);
	frameWidth = parseInt(tagFrame.style.width);
	frameHeight = parseInt(tagFrame.style.height);
	
	registerEventListener(document.body, "mousemove", tagMoverMouseMove, false);
	registerEventListener(document.body, "mouseup", tagMoverMouseUp, false);
}

/* tagFrameMoverMouseMove moves the tagFrame when the mouse is moved. It
/* simulates dragging the frame but constrains the position of the frame to
/* the boundaries of lzLumenPicture */
function tagMoverMouseMove (e) {
	
	mousePosition = getMousePos(e);
	mousePositionX = mousePosition.x - imageOffsetXExternal;
  mousePositionY = mousePosition.y - imageOffsetYExternal;
	
	// horizontal movement handling
	if (initialLeft + mousePositionX - initialX > imageLeft && initialLeft + mousePositionX - initialX + frameWidth < imageRight) {
		tagFrame.style.left = initialLeft + mousePositionX - initialX + "px";
		cornerDragger.style.left = initialLeft + frameWidth + mousePositionX - initialX + "px";
	} else if (initialLeft + mousePositionX - initialX <= imageLeft) {
		tagFrame.style.left = imageLeft + "px";
		cornerDragger.style.left = imageLeft + frameWidth + "px";
	}	else if (initialLeft + mousePositionX - initialX + frameWidth > imageLeft) {
		tagFrame.style.left = imageRight - frameWidth + "px";
		cornerDragger.style.left = imageRight + "px";
	}
	
	// vertical movement handling
	if (initialTop + mousePositionY - initialY > imageTop && initialTop + mousePositionY - initialY + frameHeight < imageBottom) {
		tagFrame.style.top = initialTop + mousePositionY - initialY + "px";
		cornerDragger.style.top = initialTop + frameHeight + mousePositionY - initialY + "px";
	} else if (initialTop + mousePositionY - initialY < imageTop) {
		tagFrame.style.top = imageTop + "px";
		cornerDragger.style.top = imageTop + frameHeight + "px";
	}	else if (initialTop + mousePositionY - initialY + frameHeight > imageBottom) {
		tagFrame.style.top = imageBottom - frameHeight + "px";
		cornerDragger.style.top = imageBottom + "px";
	}
}

/* tagMoverMouseUp removes tagMover event listeners and resets eventSelect */
function tagMoverMouseUp () {
	eventSelect = 0;
	unregisterEventListener(document.body, "mousemove", tagMoverMouseMove, false);
	unregisterEventListener(document.body, "mouseup", tagMoverMouseUp, false);
}

/* tagMover handles resizing the tagFrame.
?* startX: x position of mouse at time of call
?* startY: y position of mouse at time of call */
function tagFrameResizer (startX, startY) {
	initialX = startX;
	initialY = startY;
	
	// stores the initial position information of tagFrame
	initialLeft = parseInt(tagFrame.style.left);
	initialTop = parseInt(tagFrame.style.top);
	frameWidth = parseInt(tagFrame.style.width);
	frameHeight = parseInt(tagFrame.style.height);

	registerEventListener(document.body, "mousemove", tagFrameResizerMouseMove, false);
	registerEventListener(document.body, "mouseup", tagFrameResizerMouseUp, false);
	
}

/* tagFrameResizerMouseMove resizes tagFrame when the mouse moves. It simulates
/* draggable resizing and contrains the tagFrame to the boundaaries of
/* lzLumenPicture. */
function tagFrameResizerMouseMove (e) {
	
	mousePosition = getMousePos(e);
	mousePositionX = mousePosition.x - imageOffsetXExternal;
  mousePositionY = mousePosition.y - imageOffsetYExternal;

	// handles horizontal movement
	if (mousePositionX - initialLeft > 0 && initialLeft + frameWidth + mousePositionX - initialX <= imageRight) {
		tagFrame.style.left = initialLeft + "px";
		tagFrame.style.width = frameWidth + mousePositionX - initialX + "px";
		cornerDragger.style.left = initialLeft + frameWidth + mousePositionX - initialX + "px";
	} else if (mousePositionX >= imageLeft && initialLeft + frameWidth + mousePositionX - initialX <= imageRight) {
		tagFrame.style.left = mousePositionX + "px";
		tagFrame.style.width = initialLeft - mousePositionX + "px";
		cornerDragger.style.left = initialLeft + "px";
	} else if (initialLeft + frameWidth + mousePositionX - initialX > imageRight) {
		tagFrame.style.left = initialLeft + "px";
		tagFrame.style.width = imageRight - initialLeft + "px";
		cornerDragger.style.left = imageRight + "px";
	} else if (mousePositionX < imageLeft) {
		tagFrame.style.left = imageLeft + "px";
		tagFrame.style.width = initialLeft - imageLeft + "px";
		cornerDragger.style.left = initialLeft + "px";
	}

	// handles vertical movement
	if (mousePositionY - initialTop > 0 && initialTop + frameHeight + mousePositionY - initialY <= imageBottom) {
		tagFrame.style.top = initialTop + "px";
		tagFrame.style.height = frameHeight + mousePositionY - initialY + "px";
		cornerDragger.style.top = initialTop + frameHeight + mousePositionY - initialY + "px";
	} else if (mousePositionY >= imageTop && initialTop + frameHeight + mousePositionY - initialY <= imageBottom) {
		tagFrame.style.top = mousePositionY + "px";
		tagFrame.style.height = initialTop - mousePositionY + "px";
		cornerDragger.style.top = initialTop + "px";
	} else if (initialTop + frameHeight + mousePositionY - initialY > imageBottom) {
		tagFrame.style.top = initialTop + "px";
		tagFrame.style.height = imageBottom - initialTop + "px";
		cornerDragger.style.top = imageBottom + "px";
	} else if (mousePositionY < imageTop) {
		tagFrame.style.top = imageTop + "px";
		tagFrame.style.height = initialTop - imageTop + "px";
		cornerDragger.style.top = initialTop + "px";
	}
}

/* tagFrameResizerMouseUp removes tagFrameResizer event listeners and resets
/* eventSelect */
function tagFrameResizerMouseUp () {
	eventSelect = 0;
	unregisterEventListener(document.body, "mousemove", tagFrameResizerMouseMove, false);
	unregisterEventListener(document.body, "mouseup", tagFrameResizerMouseUp, false);
}

/* tagFrameDrawer draws the tagFrame and controls related element visibility.
?* startX: x position of mouse at time of call
?* startY: y position of mouse at time of call */
function tagFrameDrawer (startX, startY) {
	
	initialX = startX;
	initialY = startY;
	
	registerEventListener(document.body, "mousemove", tagFrameDrawerVisibility, false);
	registerEventListener(document.body, "mousemove", tagFrameDrawerMouseMove, false);
	registerEventListener(document.body, "mouseup", tagFrameDrawerMouseUp, false);
	registerEventListener(document.body, "mouseup", tagFrameDrawerWithoutDragUp, false);
		
}

/* tagFrameDrawerWithoutDragUp removes tagFrameDrawer event listeners if
/* mousedown is part of a click without a drag. */
function tagFrameDrawerWithoutDragUp () {
	eventSelect = 0;
	unregisterEventListener(document.body, "mousemove", tagFrameDrawerVisibility, false);
	unregisterEventListener(document.body, "mouseup", tagFrameDrawerWithoutDragUp, false);
	
}

/* tagFrameDrawerVisibility makes tagFrame visible and removes withoutMouseUp
/* handlers. */
function tagFrameDrawerVisibility () {
	tagFrame.style.visibility = "visible";
	cornerDragger.style.visibility = "hidden";
	
	unregisterEventListener(document.body, "mouseup", tagFrameDrawerWithoutDragUp, false);
	unregisterEventListener(document.body, "mousemove", tagFrameDrawerVisibility, false);
	
}

/* tagFrameDrawerMouseMove draws and resizes tagFrame from point of mousedown.
/* It simulates drag to draw and resize of tagFrame and constrains tagFrame
/* to the boundaries of lzLumenPicture. */
function tagFrameDrawerMouseMove (e) {
	
	mousePosition = getMousePos(e);
	mousePositionX = mousePosition.x - imageOffsetXExternal;
  mousePositionY = mousePosition.y - imageOffsetYExternal;

	// handles horizontal movement
	if (mousePositionX - initialX > 0 && mousePositionX <= imageRight) {
		tagFrame.style.left = initialX + "px";
		tagFrame.style.width = mousePositionX - initialX + "px";
		cornerDragger.style.left = mousePositionX + "px";
	} else if (mousePositionX >= imageLeft && mousePositionX <= imageRight) {
		tagFrame.style.left = mousePositionX + "px";
		tagFrame.style.width = initialX - mousePositionX + "px";
		cornerDragger.style.left = initialX + "px";
	} else if ( mousePositionX > imageRight) {
		tagFrame.style.left = initialX + "px";
		tagFrame.style.width = imageRight - initialX + "px";
		cornerDragger.style.left = imageRight + "px";
	} else if ( mousePositionX < imageLeft) {
		tagFrame.style.left = imageLeft + "px";
		tagFrame.style.width = initialX - imageLeft + "px";
		cornerDragger.style.left = initialX + "px";
	}

	// handles vertical movement
	if (mousePositionY - initialY > 0 && mousePositionY <= imageBottom) {
		tagFrame.style.top = initialY + "px";
		tagFrame.style.height = mousePositionY - initialY + "px";
		cornerDragger.style.top = mousePositionY + "px";
	} else if (mousePositionY >= imageTop && mousePositionY <= imageBottom) {
		tagFrame.style.top = mousePositionY + "px";
		tagFrame.style.height = initialY - mousePositionY + "px";
		cornerDragger.style.top = initialY + "px";
	} else if ( mousePositionY > imageBottom) {
		tagFrame.style.top = initialY + "px";
		tagFrame.style.height = imageBottom - initialY + "px";
		cornerDragger.style.top = imageBottom + "px";
	} else if ( mousePositionY < imageTop) {
		tagFrame.style.top = imageTop + "px";
		tagFrame.style.height = initialY - imageTop + "px";
		cornerDragger.style.top = initialY + "px";
	}
	
}

/* tagFrameDrawerMouseUp removes tagFrameDrawer events, registers tagFrame
/* editing listeners, and resets eventSelect. */
function tagFrameDrawerMouseUp() {
	eventSelect = 0;
	document.getElementById("tagsTable").style.visibility = "visible";
	cornerDragger.style.visibility = "visible";
	unregisterEventListener(document.body, "mousemove", tagFrameDrawerMouseMove, false);
	
	clearCode();
	
	unregisterEventListener(document.body, "mouseup", tagFrameDrawerMouseUp, false);
	
}

/* tagFrameDrawerStarter gets the initial mouse position and sets eventSelect. */
function tagFrameDrawerStarter (e) {
	mousePosition = getMousePos(e);
	eventSelect += 1;
	eventRouter(mousePosition.x, mousePosition.y);
}

/* tagFrameMoverStarter gets the initial mouse position and sets eventSelect. */
function tagFrameMoverStarter (e) {
	mousePosition = getMousePos(e);
	eventSelect += 2;
	eventRouter(mousePosition.x, mousePosition.y);
}

/* tagFrameResizerStarter gets the initial mouse position and sets eventSelect. */
function tagFrameResizerStarter (e) {
	mousePosition = getMousePos(e);
	eventSelect += 3;
	eventRouter(mousePosition.x, mousePosition.y);
}

/* eventRouter calls the appropriate tagFrame editor.
?* startX: x position of mouse at time of call
?* startY: y position of mouse at time of call */
function eventRouter (startX, startY) {
	
	startX -= imageOffsetXExternal;
	startY -= imageOffsetYExternal;
	
	if (eventSelect == 1) {
		tagFrameDrawer(startX, startY);
	} else if (eventSelect == 2) {
		tagMover(startX, startY);
	} else if (eventSelect == 3) {
		tagFrameResizer(startX, startY);
	}
	
}

/* testSpotlight runs the spotlightMover targeting the tagFrame. it is used to
/* demo the tag. */
function testSpotlight () {
	var left = parseInt(tagFrame.style.left) - imageLeft;
	var right = parseInt(tagFrame.style.left) + parseInt(tagFrame.style.width) - imageLeft;
	var top = parseInt(tagFrame.style.top) - imageTop;
	var bottom = parseInt(tagFrame.style.top) + parseInt(tagFrame.style.height) - imageTop;
	spotlightMover(left, right, top, bottom);
}

/* testTagMouseOver calls testSpotlight and hides the tagFrame elements. */
function testTagMouseOver () {
	document.getElementById('tagFrame').style.visibility = 'hidden';
	document.getElementById('pictureTagScreen').style.visibility = 'hidden';
	document.getElementById('cornerDragger').style.visibility = 'hidden';
	testSpotlight();
}

/* testTagMouseOver pulls back the spotlight and shows the tagFrame elements. */
function testTagMouseOut () {
	spotlightMover(0, imageWidth, 0, imageHeight);
	document.getElementById('tagFrame').style.visibility = 'visible';
	document.getElementById('pictureTagScreen').style.visibility = 'visible';
	document.getElementById('cornerDragger').style.visibility = 'visible';
}

/* addTag adds the current tag. The current tagFrame position and tag name
/* information is added to the tagArray and the tags trough is updated. */
function addTag () {
	
	// ensures valid tagToEdit
	if (!(tagToEdit >= 0)) {
		tagToEdit = tagArray.length;
	}
	
	var tagToAdd = []; // temporary array for tag information
	tagToAdd[0] = document.tagForm.tag.value;
	tagToAdd[1] = parseInt(tagFrame.style.left) - imageLeft;
	tagToAdd[2] = parseInt(tagFrame.style.left) + parseInt(tagFrame.style.width) - imageLeft;
	tagToAdd[3] = parseInt(tagFrame.style.top) - imageTop;
	tagToAdd[4] = parseInt(tagFrame.style.top) + parseInt(tagFrame.style.height) - imageTop;
	tagArray[tagToEdit] = tagToAdd;
	
	drawTagTroughTable(); // update tagsTrough
	
	document.tagForm.tag.value = ""; // reset form
	
	// reset visibility
	tagFrame.style.visibility = "hidden";
	document.getElementById("tagsTable").style.visibility = "hidden";
	cornerDragger.style.visibility = "hidden";
	tagToEdit = tagArray.length; // update index of next tag
	
	clearCode(); // clear outdated code
	
}

/* editTag edits the desired tag. It draws tagFrame and sets the name field
/* from tagArray data and makes the tag the target of tagAdd.
/* tag: the index of the desired tag in tagArray. */
function editTag (tag) {
	
	tagForEdit = tagArray[tag];
	
	// draw tagFrame
	tagFrame.style.left = tagForEdit[1] + imageLeft + "px";
	tagFrame.style.width = tagForEdit[2] - parseInt(tagFrame.style.left) + imageLeft + "px";
	tagFrame.style.top = tagForEdit[3] + imageTop + "px";
	tagFrame.style.height = tagForEdit[4] - parseInt(tagFrame.style.top) + imageTop + "px";
	cornerDragger.style.left = parseInt(tagFrame.style.left) + parseInt(tagFrame.style.width) + "px";
	cornerDragger.style.top = parseInt(tagFrame.style.top) + parseInt(tagFrame.style.height) + "px";
	
	// set name field
	document.tagForm.tag.value = tagForEdit[0];
	
	// set visibility
	tagFrame.style.visibility = "visible";
	document.getElementById("tagsTable").style.visibility = "visible";
	cornerDragger.style.visibility = "visible";
	
	// sets tag to edit to the selected tag
	tagToEdit = tag;
	
	// clear outdated code
	clearCode();
	
}

/* cancelEdit cancels current tag. No changes are saved. */
function cancelEdit () {
	
	document.tagForm.tag.value = "";
	
	tagFrame.style.visibility = "hidden";
	cornerDragger.style.visibility = "hidden";
	
	document.getElementById("tagsTable").style.visibility = "hidden";
	
	tagToEdit = tagArray.length;
	
}

/* deleteTag deletes the selected tag. It sets the tagArray for the entry to
/* null and clears outdated code.
/* tag: index of tag to be deleted from tagArray. */
function deleteTag (tag) {
	tagArray[tag] = null;
	drawTagTroughTable();
	clearCode();
	hasMouseOver = 0; delayForMouseOver();
}

/* drawTagTroughTable generates the tags trough. Draws from tagArray values. */
function drawTagTroughTable () {
	
	var tagsTroughHTML = "<table id='tagsTroughTable'><tr><th colspan='3'>Tags</th></tr>"; // HTML holder
	
	for (var tag = 0; tag < tagArray.length; tag++) {
		if (tagArray[tag]) {
			var thisTag = tagArray[tag];
			tagsTroughHTML += "<tr onmouseover = 'hasMouseOver = 1; spotlightMover(" + thisTag[1] + ", " + thisTag[2] + ", " + thisTag[3] + ", " + thisTag[4] + ");'><td onclick='editTag(" + tag + ");' >" + tagArray[tag][0] + "</td><td width='8em' onclick='deleteTag(" + tag + "); '>delete</td></tr>";
		}
	}
	
	tagsTroughHTML += "</table>"
	
	document.getElementById("tagsTroughTableHolder").innerHTML = tagsTroughHTML;
	
}

/* generateEmbedCode displays the code to include the tagged image in an
/* external site. */
function generateEmbedCode () {
	var firstTag = 0; // index of first non-null tag in tagArray
	var embedCodeHTML = "<b>place in head:</b><br /><br />"; // HTML holder
	embedCodeHTML += "&lt;link rel=&quot;stylesheet&quot; href=&quot;" + lumenURL + "lzLumen.css&quot; /&gt;<br />&lt;script type=&quot;text/javascript&quot; src=&quot;" + lumenURL + "scripts/lumen.js&quot;&gt;&lt;/script&gt;"
	embedCodeHTML += "<br /><br /><b>place in body:</b><br /><br />"
	embedCodeHTML += "&lt;div id=&quot;lzLumen&quot; style=&quot;height:" + (imageHeight + 30) + "px;&quot;&gt;";
	embedCodeHTML += "&lt;/div&gt;<br />";
	embedCodeHTML += "&lt;script&gt;<br />";
	embedCodeHTML += "&nbsp;&nbsp;&nbsp;&nbsp;var lzLumenImageSource = &quot;" + document.lzLumenPicture.src + "&quot;;<br />";
	embedCodeHTML += "&nbsp;&nbsp;&nbsp;&nbsp;var lzLumenTags = [<br />";
	for (var tag = 0; tag < tagArray.length; tag++) {
		if (tagArray[tag]) {
			var thisTag = tagArray[tag];
			if (tag == firstTag) {
				embedCodeHTML += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;" + thisTag[0] + "&quot;," + thisTag[1] + "," + thisTag[2] + "," + thisTag[3] + "," + thisTag[4] + "]";
			} else {
				embedCodeHTML += ",<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&quot;" + thisTag[0] + "&quot;," + thisTag[1] + "," + thisTag[2] + "," + thisTag[3] + "," + thisTag[4] + "]";
			}
		} else {
			firstTag++;
		}
	}
	embedCodeHTML += "<br />&nbsp;&nbsp;&nbsp;&nbsp;];<br />";
	embedCodeHTML += "&nbsp;&nbsp;&nbsp;&nbsp;lzLumenMaker(&quot;lzLumen&quot;, lzLumenImageSource, lzLumenTags);<br />";
	embedCodeHTML += "&lt;/script&gt;"
	document.getElementById("script").innerHTML = embedCodeHTML;
	document.getElementById("script").style.visibility = "visible"; // displays
}

/* clearCode clears and hides the generated code. */
function clearCode () {
	document.getElementById("script").innerHTML = "";
	document.getElementById("script").style.visibility = "hidden";
}

/* getMousePos gets the x and y mouse positions. It returns them in an object and trys to resolve browser compatibility issues. */
function getMousePos (e) {
	var position = {};
	if (e) { // mozilla, webkit
		position.x = e.pageX;
		position.y = e.pageY;
	} else { // ie
		position.x = window.event.clientX + document.body.scrollLeft;
		position.y = window.event.clientY + document.body.scrollTop;
	}
	return position;
}

/* loadPicture loads pictureURL to lzLumenPicture and clears the pictureURL
/* field. */
function loadPicture () {
	if (validURLCheck()) {
		document.lzLumenPicture.src = document.getElementById('pictureURL').value;
		document.getElementById('pictureLoadingIndicator').style.visibility = 'visible';
		document.getElementById('pictureURL').value = '';
	}
	return false;
}

/* validURLCheck ensures that pictureURL is non empty. */
function validURLCheck () {
	if (document.getElementById("pictureURL").value == "") {
		alert('No url was given. Please enter a valid url.');
		return false;
	} else {
		return true;
	}
}

/* registerEventListener adds event listeners and attempts to resolve browser
/* incompatibilities.
/* element: the element for the listener.
/* eventType: the type of event.
/* handler: function to call when the event occurs.
/* captures: boolean, whether event captures or not
/* ieOnLoseCapture: function to call if ie loses capture. */
function registerEventListener (element, eventType, handler, captures, ieOnLoseCaptureHandler) {
	var onEventType = "on" + eventType;
	
	if (document.addEventListener) { // mozilla, webkit
		element.addEventListener(eventType, handler, captures);
	} else if (document.attachEvent) { // ie
		if (captures) {
			element.setCapture();
			element.attachEvent("onlosecapture", ieOnLoseCaptureHandler);
		}
		element.attachEvent(onEventType, handler);
	}
}

/* unregisterEventListener removes event listeners.
/* element: the element of the listener.
/* eventType: the type of event.
/* handler: listener's function.
/* captures: boolean, whether event captures or not
/* ieOnLoseCapture: function called if ie loses capture. */
function unregisterEventListener (element, eventType, handler, captures, ieOnLoseCaptureHandler) {
	if (document.removeEventListener) { // mozilla, webkit
		element.removeEventListener(eventType, handler, captures);
	} else if (document.detachEvent) { // ie
		element.detachEvent(onEventType, handler);
		if (captures) {
			element.releaseCapture();
			element.detachEvent("onlosecapture", ieOnLoseCaptureHandler);
		}
	}
}